<template>
  <div class="add-box">
    <el-dialog width="800px" top="3%" :title="dialogTitle" v-model="dialogFormVisible" :close-on-click-modal="false"
      :draggable="true" @close="dialogClose">
      <div class="dialog-content">
        <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="商户" prop="shopId">
                <el-select style="width:100%" v-model="dialogForm.shopId" placeholder="请选择商户">
                  <el-option v-for="item in shopOptions" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品名称" prop="packageName">
                <el-input v-model="dialogForm.packageName" placeholder="请输入产品名称" @keypress.enter="submitHandle" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="产品信息" prop="otherGoods">
                <el-input type="textarea" v-model="dialogForm.otherGoods" placeholder="请输入产品信息" @keypress.enter="submitHandle" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="产品备注" prop="packageDesc">
                <el-input type="textarea" v-model="dialogForm.packageDesc" placeholder="请输入产品备注" @keypress.enter="submitHandle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注信息" prop="descMsg">
                <el-input type="textarea" v-model="dialogForm.descMsg" placeholder="请输入备注信息" @keypress.enter="submitHandle" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="下单时，需要上传预存" prop="needPrestore">
                <el-radio-group v-model="dialogForm.needPrestore">
                  <el-radio :label="0">不必传</el-radio>
                  <el-radio :label="1">必传</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <span>预存</span>
            <div class="yucun">
              <div v-for="(item,index) in dialogForm.premoneyList" :key="item">
                <div>
                  <el-row :gutter="5" align="middle">
                    <el-col :span="8">
                      <el-form-item label="预存面额" :prop="'premoneyList.'+index+'.showMoney'" :rules="dialogFormRules.showMoney">
                        <el-input v-model="item.showMoney" type="number" min="0" placeholder="预存面额" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="实付金额" :prop="'premoneyList.'+index+'.payMoney'" :rules="dialogFormRules.payMoney">
                        <el-input v-model="item.payMoney" type="number" min="0" placeholder="实付金额" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="标题" :prop="'premoneyList.'+index+'.activityTitle'"
                        :rules="dialogFormRules.activityTitle">
                        <el-input v-model="item.activityTitle" placeholder="请输入标题" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5" align="middle">
                    <el-col :span="8">
                      <el-form-item label="活动描述" :prop="'premoneyList.'+index+'.activityMsg'"
                        :rules="dialogFormRules.activityMsg">
                        <el-input v-model="item.activityMsg" placeholder="请输入活动描述" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="活动编码" :prop="'premoneyList.'+index+'.offerCode'" :rules="dialogFormRules.offerCode">
                        <el-input v-model="item.offerCode" placeholder="请输入渠道活动编码" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <el-icon class="icon-close" @click="removeItem(item,index)">
                  <CircleClose />
                </el-icon>
              </div>
              <el-button style="margin-top: 10px;" type="primary" @click="addPremoney">
                增加预存
              </el-button>
            </div>
          </div>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitHandle">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref, toRefs, watch } from 'vue'
import { successDeal, warningDeal } from '@/utils/utils'
import api from '../api'
export default {
  setup(props, context) {
    const dialogFormRef = ref(null)

    const state = reactive({
      dialogTitle: '',
      dialogType: null,
      dialogFormVisible: false,
      dialogForm: {},
      dialogFormRules: {
        showMoney: [
          { required: true, message: '请输入预存面额', trigger: 'blur' },
        ],
        payMoney: [
          { required: true, message: '请输入实付金额', trigger: 'blur' },
        ],
        activityTitle: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        activityMsg: [
          { required: true, message: '请输入活动描述', trigger: 'blur' },
        ],
        needPrestore: [
          { required: true, message: '请选择下单时，是否必须上传预存', trigger: 'blur' },
        ],
      },
      shopOptions: [],
    })

    watch(() => state.dialogType, (newVal, oldVal) => {
      switch (newVal) {
        case 'add':
          state.dialogTitle = '新增产品'
          break
        case 'edit':
          state.dialogTitle = '编辑产品'
          break
      }
    })

    function dialogShow(type, data) {
      state.dialogType = type
      state.dialogForm = data
      getShopList()
      state.dialogFormVisible = true
    }

    function getShopList() {
      const obj = {
        operatorCode: state.dialogForm.operatorCode
      }
      api.shopList(obj).then(res => {
        if (res.code == '200') {
          state.shopOptions = res.data.list
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function submitHandle() {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          if (state.dialogType == 'add') {
            const obj = {
              packageName: state.dialogForm.packageName || '',
              otherGoods: state.dialogForm.otherGoods || '',
              packageDesc: state.dialogForm.packageDesc || '',
              descMsg: state.dialogForm.descMsg || '',
              operatorCode: state.dialogForm.operatorCode || '',
              needPrestore: state.dialogForm.needPrestore || '',
              premoneyList: state.dialogForm.premoneyList || [],
            }
            api.packageAdd(obj).then(res => {
              if (res.code == '200') {
                successDeal(res.msg)
                context.emit('dialogClose')
                state.dialogFormVisible = false
              } else {
                warningDeal(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            const obj = {
              packageName: state.dialogForm.packageName || '',
              otherGoods: state.dialogForm.otherGoods || '',
              packageDesc: state.dialogForm.packageDesc || '',
              descMsg: state.dialogForm.descMsg || '',
              operatorCode: state.dialogForm.operatorCode || '',
              recordId: state.dialogForm.recordId || '',
              needPrestore: state.dialogForm.needPrestore || '',
              premoneyList: state.dialogForm.premoneyList || [],
            }
            api.packageModify(obj).then(res => {
              if (res.code == '200') {
                successDeal(res.msg)
                context.emit('dialogClose')
                state.dialogFormVisible = false
              } else {
                warningDeal(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      })
    }

    function dialogClose() {
      dialogFormRef.value.resetFields()
    }

    function addPremoney() {
      if (state.dialogForm.premoneyList && state.dialogForm.premoneyList.length > 0) {
        state.dialogForm.premoneyList.push({})
      } else {
        state.dialogForm.premoneyList = [{}]
      }
    }

    function removeItem(data, index) {
      state.dialogForm.premoneyList.splice(index, 1)
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      dialogShow,
      submitHandle,
      dialogClose,
      addPremoney,
      removeItem,
    }
  }
}
</script>

<style lang="scss" scoped>
.yucun {
  > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10px;
    background-color: rgba($color: #000000, $alpha: 0.1);
    margin-top: 10px;
  }
}
.icon-close {
  font-size: 24px;
  cursor: pointer;
  margin-left: 5px;
}
</style>